<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head data-th-replace="admin/common/head"></head>
<body>
<!-- Navigation -->
<th:block data-th-replace="admin/common/navigation"></th:block>

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">查看统计数据</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->

    <div class="row">
        <div class="col-lg-12">
            <div style="width:850px;height:300px;text-align:center;margin:10px">
                <div id="flot-placeholder" style="width:100%;height:100%;"></div>
            </div>
        </div>
    </div>


</div>
<!-- /#page-wrapper -->
<!-- Scripts -->
<th:block data-th-replace="admin/common/scripts"></th:block>

<script  th:inline="javascript">

    var data = /*[[${javascriptData}]]*/ 'Sebastian';
    var ticks = /*[[${javascriptTicks}]]*/ 'Sebastian';

    data = eval(data);
    ticks = eval(ticks);
    //var data = [[0, 11],[1, 15],[2, 25],[3, 24],[4, 13],[5, 18]];
    var dataset = [{ label: "近7天交易额", data: data, color: "#5482FF" }];
    //var ticks = [[0, "7"], [1, "6"], [2, "5"], [3, "4"],[4, "3"], [5, "2"],[6,"1"]];
    var options = {
        series: {
            bars: {
                show: true
            }
        },
        bars: {
            align: "center",
            barWidth: 0.5
        },
        xaxis: {
            axisLabel: "近7天",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10,
            ticks: ticks
        },
        yaxis: {
            axisLabel: "交易额",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3,
            tickFormatter: function (v, axis) {
                return v + "元";
            }
        },
        legend: {
            noColumns: 0,
            labelBoxBorderColor: "#000000",
            position: "nw"
        },
        grid: {
            hoverable: true,
            borderWidth: 2,
            backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
        }
    };


    $(document).ready(function () {

        $.plot($("#flot-placeholder"), dataset, options);
        $("#flot-placeholder").UseTooltip();





    });








    function gd(year, month, day) {
        return new Date(year, month, day).getTime();
    }

    var previousPoint = null, previousLabel = null;

    $.fn.UseTooltip = function () {
        $(this).bind("plothover", function (event, pos, item) {
            if (item) {
                if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                    previousPoint = item.dataIndex;
                    previousLabel = item.series.label;
                    $("#tooltip").remove();
                    var x = item.datapoint[0];
                    var y = item.datapoint[1];
                    var color = item.series.color;
                    showTooltip(item.pageX,
                        item.pageY,
                        color,
                        "<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong>元");
                }
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    };

    function showTooltip(x, y, color, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 40,
            left: x - 120,
            border: '2px solid ' + color,
            padding: '3px',
            'font-size': '9px',
            'border-radius': '5px',
            'background-color': '#fff',
            'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            opacity: 0.9
        }).appendTo("body").fadeIn(200);
    }
</script>
</body>
</html>